<template>
	<view class="">
		<view class="custom_box">
			<image class="indexbg"  :src="bgimg" mode="aspectFill" v-if="bgimg"></image>
			<image class="indexbg" :src="baseUrl +'/static/image/indexbg.png'" mode="aspectFill" v-else></image>
			<!-- #ifdef H5 -->
			<view class="custom_nav "
				:style="{height: titleHeight + 'px', backgroundColor: backgroundColor,justifyContent: jContent,marginTop:MarginTop + 'rpx'}">
				<image class="goback" :src="baseUrl +'/static/icon/i_left.png'" mode="aspectFill" @click="leftClick">
				</image>
				<slot name="center">
					<text v-if="title" class="f28 c3">{{ title }}</text>
				</slot>

			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="custom-nav"
				:style="{height:titleHeight + 'px',backgroundColor: backgroundColor,justifyContent: jContent}">
				<view class="" :style="{height:statusBarHeight + 'px'}"></view>
				<view class="custom_addrress"
					:style="{height: titleHeight + 'px'}">
					<image class="wxback" :src="baseUrl +'/static/icon/i_left.png'" mode="aspectFill" @click="leftClick">
					</image>
					<slot name="center">
						<view v-if="title" :style="{lineHeight:titleHeight + 'px',width:titleWidth,color:titleColor}"
							@click="elmitClickTit">{{title}}</view>
					</slot>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="custom-nav"
				:style="{height:titleHeight + statusBarHeight + 'px',backgroundColor: backgroundColor,justifyContent: jContent}">
				<view class="" :style="{height:statusBarHeight + 'px'}"></view>
				<view class="custom_addrress"
					:style="{height: titleHeight + 'px'}">
					<slot name="center">
						<view v-if="title" :style="{lineHeight:titleHeight + 'px',width:titleWidth,color:titleColor}"
							@click="elmitClickTit">{{title}}</view>
					</slot>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
		<view :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view :style="{height: statusBarHeight + 'px', backgroundColor: backgroundColor }"></view>
		<!-- #endif -->


	</view>

</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			// navbar背景色
			backgroundColor: {
				type: String,
				default: ''
			},
			// navbar背景图
			bgimg: {
				type: String,
				default: ''
			},
			// 自定义navbar背景图样式
			// bgImgStyle: {
			// 	type: Object,
			// 	default: () => {}
			// },
			jContent: {
				type: String,
				default: 'center'
			},
			MarginTop: {
				type: String || Number,
				default: '0'
			},
			titleColor:{
				type: String,
				default: '#fff'
			},
			leftColor:{
				type: String,
				default: '#333'
			}
		},

		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				// #ifdef H5
				statusBarHeight: 44, //状态栏高度
				titleHeight: 40, // 标题栏高度
				// #endif
				// #ifdef MP-WEIXIN || MP-ALIPAY
				statusBarHeight: 0, //状态栏高度
				titleHeight: 0, // 标题栏高度
				btnInfoTop: 0,
				btnInfoleft: 0,
				// #endif
				

			}
		},
		computed: {
			titleWidth() {
				return `calc(${this.btnInfoleft}px - 100rpx)`
			}
		},	
		onReady() {

			// #ifdef MP-WEIXIN || MP-ALIPAY
			let navbarInfo = JSON.parse(uni.getStorageSync("navbarInfo"))
			this.statusBarHeight = navbarInfo.statusBarHeight;
			this.btnInfoTop = navbarInfo.btnInfoTop;
			this.btnInfoleft = navbarInfo.btnInfoleft;
			this.titleHeight = navbarInfo.titleHeight;
			// #endif
			// #ifdef MP-ALIPAY
			my.setBackButton({
			  
			  color: this.leftColor,
			  
			  success: (res) => {
			    console.log('设置成功');
			  },
			  fail: (err) => {
			    console.log('设置失败', err);
			  }
			});
			// #endif
		},

		methods: {
			leftClick() {
				this.$emit('leftClick')
			},
			elmitClickTit() {
				console.log(123456);
				this.$emit('titleClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom_box {
		position: fixed;
		width: 750rpx;
		top: 0;
		left: 0;
		z-index: 5;
	}

	.custom-nav {
		width: 750rpx;

	}

	.custom_addrress {
		font-size: 36rpx;
		/* #ifdef MP-ALIPAY */
		margin-left: 70rpx;
		/* #endif */
		position: relative;
		/* #ifdef MP-WEIXIN */
		display: flex;
		align-items: center;
		/* #endif */
		z-index: 9;

		view {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		/* 	 */
	}

	.indexbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		/* #ifdef H5 || MP-WEIXIN */
		height: 295rpx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		height: 339rpx;
		/* #endif */
		z-index: 1;
	}

	.custom_nav {
		display: flex;
		align-items: center;

		width: 750rpx;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	.wxback{
		margin-left: 30rpx;
		width: 40rpx;
		height: 40rpx;
	}
	.goback {
		position: absolute;
		left: 30rpx;
		text-align: center;
		width: 40rpx;
		height: 40rpx;
		z-index: 6;
	}
</style>